<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue-->
    <script src="js/vue.js"></script>
    <!--引入elementui-->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="js/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="js/element-ui/lib/index.js"></script>
    <!--axios-->
    <script src="js/axios-0.18.0.js"></script>
    <!--jscookie-->
    <script src="js/js.cookie.min.js"></script>
</head>
<style>
    body {
        background: url("imgs/bg1.gif") no-repeat 0px 0px /100%;
    }

    .login {
        width: 400px;
        border: 1px solid rgb(237, 234, 234);
        margin: 60px auto;
        padding-right: 20px;
        border-radius: 10px;
    }

    .elform {
        width: 400px;
    }

    .el-form-item__label {
        color: #fff !important;
    }
</style>
<body>
<div id="app">
    <div class="login">
        <h1 style="text-align: center;color: aliceblue;">高合登录</h1>
        <el-form class="elform" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
                 class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password" show-password></el-input>
            </el-form-item>
            <el-form-item label="记住密码" prop="remember">
                <el-switch v-model="ruleForm.remember"></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">登录</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <el-button type="warning" @click="goRegister">去注册</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "666",
            ruleForm: {
                username: '',
                password: '',
                remember: true
            },
            /*表单项的验证规则*/
            rules: {
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                    {min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur'}
                ]
            }
        },
        mounted() {
            this.ruleForm.username = Cookies.get("username")
            this.ruleForm.password = Cookies.get("password")
        },

        methods: {
            // 登录提交表单
            submitForm() {
                console.log(this.ruleForm)
                _this = this
                axios.post(
                    "http://localhost:8080/user/login",
                    _this.ruleForm
                ).then(res => {
                    if (res.data.code == 20010) {
                        this.$message({
                            message: '登录成功',
                            type: 'success'
                        });
                        setInterval(function () {
                            location.href = "books.html"
                        }, 1000)
                    } else {
                        this.$message.error('账号或密码错误');
                    }
                })

            },
            //重置表单
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            goRegister() {
                location.href = "register.html"
            }
        }
    })
</script>
</html>